<template>
	<div>
		<el-table
	      :data="HotList"
	      style="width: 100%">
		      <el-table-column
		        type="index"
		        label="序号"
		        width="100">
		      </el-table-column>
		      <el-table-column
		        prop="name"
		        label="歌曲名称"
		        width="260">
		        <template slot-scope="scope">
		        	<div class="songname" @click="play(scope.row.id,scope.row.name)">
				        <i class="iconfont icon-bofang"></i>
				        <span>{{scope.row.name}}</span>
			    	</div>
			    </template>
		      </el-table-column>
		      <el-table-column
		        prop="ar[0].name"
		        label="歌手">
		      </el-table-column>
		      <el-table-column
		        prop="publishTime"
		        label="发布时间">
		        <template slot-scope="scope">
		        	<div>
		        		{{scope.row.publishTime | TimeFormat}}
		        	</div>
		        </template>
		      </el-table-column>
		      <el-table-column
		        prop="ar[0].name"
		        width="100"
		        label="收藏">
		        <template slot-scope="scope">
			        <i class="el-icon-star-off"></i>
			    </template>
		      </el-table-column>
	    </el-table>
	    <CurrentMusic ref="curmusic"></CurrentMusic>
	</div>
</template>

<script type="text/javascript">
    import CurrentMusic from "./CurrentMusic.vue"

	export default{
		data(){
			return {
				HotList:[],
			}
		},
		components:{
			CurrentMusic,
		},
		mounted(){
			// 请求热搜榜歌单 id:3778678
			this.$http.get("/cloudmusic/?type=playlist&id=3778678")
			.then((res)=>{
				console.log(res.data.playlist.tracks);
				this.HotList = res.data.playlist.tracks;
			})
		},
		filters:{
			TimeFormat(val){
				let time  =new Date(val);
				let year = time.getFullYear();  
		        let month = (time.getMonth() + 1)>=10?(time.getMonth() + 1):"0"+(time.getMonth() + 1);  
		       	let date = (time.getDate()>=10?time.getDate():("0"+time.getDate()));  
		       	return year + "-" + month + "-" + date;
			}
		},
		methods:{
			play(id,songname){
				this.$store.commit('setaudioSrc',id);
				this.$store.commit('setcurPlaySong',songname);
				this.$refs.curmusic.updateTime();
				// this.$store.commit('setSongduration')
			},
		}
	};
</script>

<style type="text/css" lang="scss">
	.songname{
        cursor: pointer;
        &:hover{
        	color: #28a745;
        }
        span{
        	margin-left: 5px;
        }
	}
	th.el-table_1_column_5.is-leaf,td.el-table_1_column_5{
		text-align: center;
		cursor: pointer;
	}
</style>